<template>
  <div class="warning">
    <div class="top">
      <div class="top_left">
        <div class="title">异常监测预警情况</div>
        <div class="yibiaopan">
          <div id="main11"></div>
          <div id="main22"></div>
          <div id="main33"></div>
          <div id="main44"></div>
        </div>
      </div>
      <div class="top_right">
        <div class="ccc" v-for="item in right_data" :key="item.index">
          <img :src="item.img" alt="" />
          <p class="text">{{ item.name }}</p>
          <p class="number">{{ item.value }}</p>
        </div>
      </div>
    </div>
    <div class="bottom" v-show="!show">
      <div class="title">异常预警三色图</div>
      <div id="main55"></div>
      <p>
        三色预警规则:对前期重要节点未按期完成的项目“前期节点亮灯”预警；对超过计划开工日期未按期开工的项目给予“应开工未开工”预警；对低于建设时序进度70%的项目给予“投资强度不足”预警
        (建设时序进度-当年实际建设时间-当年建设总时间x年度投资计划)；对超过完工时间未按期完工项目给子“应完工未完工”预警。红色:预警项目比例大于或等手50%;黄色:预警项目比例小于50%;绿色:预警项目比例为0%。
      </p>
    </div>
    <div class="bottom" v-show="show">
      <div class="title">异常预警项目清单</div>
      <tab
        :columns="columns"
        :tableData="tableData"
        :showSort="true"
        :operate="{ show: true, width: 150 }"
        ><template #operate="{ current }">
          <el-button type="text" @click="viewDetails(current)"
            >查看详情</el-button
          >
        </template>
      </tab>
      <p>
        三色预警规则:对前期重要节点未按期完成的项目“前期节点亮灯”预警；对超过计划开工日期未按期开工的项目给予“应开工未开工”预警；对低于建设时序进度70%的项目给予“投资强度不足”预警
        (建设时序进度-当年实际建设时间-当年建设总时间x年度投资计划)；对超过完工时间未按期完工项目给子“应完工未完工”预警。红色:预警项目比例大于或等手50%;黄色:预警项目比例小于50%;绿色:预警项目比例为0%。
      </p>
    </div>
  </div>
</template>

<script>
import {
  GetAlarmTotal,
  GetAlarmColorTotal,
  GetAlarmColorData
} from '@/api/index';
import tab from '../table/tab.vue';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { tab },
  data() {
    //这里存放数据
    return {
      right_data: [
        {
          img: require('@/assets/images/21.png')
        },
        {
          img: require('@/assets/images/22.png')
        },
        {
          img: require('@/assets/images/23.png')
        },
        {
          img: require('@/assets/images/24.png')
        }
      ],
      myChart: null,
      myChart2: null,
      myChart3: null,
      myChart4: null,
      myChart5: null,
      show: false,
      columns: columns,
      tableData: []
    };
  },
  //监听属性 类似于data概念
  computed: {
    monitoringItems() {
      let data = {
        itemTypeId: this.$store.state.itemTypeId,
        deptid: this.$store.state.deptid,
        curryear: this.$store.state.curryear,
        departmentSwitching: this.$store.state.departmentSwitching
      };
      return data;
    }
  },
  //监控data中的数据变化
  watch: {
    monitoringItems: {
      handler(newVal, oldVal) {
        if (newVal.itemTypeId) {
          this.getInitdata(newVal.itemTypeId, newVal.deptid);
          this.GetAlarmColorTotal(newVal.itemTypeId, newVal.deptid);
          this.show = newVal.departmentSwitching;
        }
        if (newVal.deptid) {
          this.GetAlarmColorData(newVal);
          this.getInitdata(newVal.itemTypeId, newVal.deptid);
          this.show = newVal.departmentSwitching;
        }
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    //表格详情跳转旧系统
    viewDetails(val) {
      let url = `${val.row.url}`;
      window.location = url;
    },
    //异常预警监测情况数据
    getInitdata(itemTypeId, deptid) {
      GetAlarmTotal({ itemTypeId: itemTypeId, deptid: deptid }).then((res) => {
        if (res.data.code == 200) {
          let _data = res.data.data;
          this.qianqi(_data[0][0]);
          this.yingkaiweikai(_data[0][1]);
          this.touziqiangdu(_data[0][2]);
          this.yingkaiweiwan(_data[0][3]);
          //合并对象数组
          this.right_data = this.right_data.map((img, index) => {
            return { ...img, ..._data[1][index] };
          });
        }
      });
    },
    //表格数据
    GetAlarmColorData(data) {
      GetAlarmColorData(data).then((res) => {
        this.tableData = res.data.data[0].map((i) => {
          i.planInvestment = i.planInvestment + '万元';
          i.investmentAll = i.investmentAll + '万元';
          i.investment = i.investment + '万元';
          if (i.enterStatStoreFlag == 1) {
            i.enterStatStoreFlag = '已入库';
            return i;
          } else {
            i.enterStatStoreFlag = '未入库';
            return i;
          }
        });
      });
    },
    //三色图数据
    GetAlarmColorTotal(itemTypeId, deptid) {
      GetAlarmColorTotal({ itemTypeId: itemTypeId, deptid: deptid }).then(
        (res) => {
          this.sanse(res.data);
        }
      );
    },
    //仪表盘配置
    yibiaopan(data) {
      let option = {
        grid: {
          left: '0%',
          top: '0%',
          right: '0%',
          bottom: '0%'
        },
        backgroundColor: '#ffffff',
        color: ['#37A2DA', '#32C5E9', '#67E0E3'],
        series: [
          {
            name: '',
            type: 'gauge',
            detail: {
              formatter: '{value}%',
              color: '#7AA9DF',
              fontSize: 12
            },
            title: {
              offsetCenter: ['0', '90%'],
              textStyle: {
                color: '#444A56',
                fontSize: 12,
                fontWeight: 'bold',
                fontFamily: 'Microsoft YaHei'
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                width: 10,
                shadowBlur: 0,
                color: [
                  [0.3, '#43CB69'],
                  [0.7, '#37a2da'],
                  [1, '#fd666d']
                ]
              }
            },
            data: [
              {
                value: data.value,
                name: data.name
              }
            ],
            radius: '80%',
            axisTick: {
              show: true,
              distance: -6.5,
              lineStyle: {
                color: '#fff'
              }
            },
            axisLabel: {
              color: 'auto'
            },
            splitLine: {
              lineStyle: {
                color: '#fff',
                width: 2
              },
              distance: -10.5
            }
          }
        ]
      };
      return option;
    },
    //前期节点亮灯
    qianqi(sdata) {
      this.myChart.setOption(this.yibiaopan(sdata));
    },
    yingkaiweikai(sdata) {
      this.myChart2.setOption(this.yibiaopan(sdata));
    },
    touziqiangdu(sdata) {
      this.myChart3.setOption(this.yibiaopan(sdata));
    },
    yingkaiweiwan(sdata) {
      this.myChart4.setOption(this.yibiaopan(sdata));
    },
    //预警三色图
    sanse(sdata) {
      let option = {
        title: {
          textStyle: {
            fontWeight: 'normal',
            fontSize: 16,
            color: '#F1F1F3'
          },
          left: '6%'
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            lineStyle: {
              color: '#57617B'
            }
          }
        },
        legend: {
          icon: 'circle',
          itemWidth: 14,
          itemHeight: 5,
          itemGap: 13,
          data: [
            '前期节点亮灯',
            '应开工未开工',
            '投资强度不足',
            '应完工未完工'
          ],
          left: '40%',
          bottom: '1%',
          textStyle: {
            fontSize: 12,
            color: '#000'
          }
        },
        grid: {
          left: '1%',
          right: '1%',
          bottom: '12%',
          top: '2%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            boundaryGap: false,
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            data: sdata[0].data
          }
        ],
        yAxis: [
          {
            type: 'value',

            axisTick: {
              show: false
            },
            axisLine: {
              lineStyle: {
                color: '#57617B'
              }
            },
            axisLabel: {
              margin: 10,
              textStyle: {
                fontSize: 14
              }
            },
            splitLine: {
              lineStyle: {
                color: '#e1e1e1',
                type: 'dashed'
              }
            }
          }
        ],
        series: [
          {
            name: '应完工未完工',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(153,229,225,1)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(153,229,225,0.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,225,225,0.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#6AE3D4',
                borderColor: '#6AE3D4',
                borderWidth: 20
              }
            },
            data: sdata[4].data
          },
          {
            name: '应开工未开工',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(240,132,129,1)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(240,132,129,.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(255,132255,255,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#F08481',
                borderColor: '#F08481',
                borderWidth: 20
              }
            },
            data: sdata[2].data
          },
          {
            name: '投资强度不足',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(254, 192, 153,1)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(254, 192, 153,.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(254, 192, 153,0.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#F19D6E',
                borderColor: '#F19D6E',
                borderWidth: 12
              }
            },
            data: sdata[3].data
          },
          {
            name: '前期节点亮灯',
            type: 'line',
            smooth: true,
            symbol: 'circle',
            symbolSize: 5,
            showSymbol: false,
            lineStyle: {
              normal: {
                width: 3
              }
            },
            areaStyle: {
              normal: {
                color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: 'rgba(142, 160, 255,1)'
                  },
                  {
                    offset: 0.8,
                    color: 'rgba(142, 160, 255,0.8)'
                  },
                  {
                    offset: 1,
                    color: 'rgba(142, 160, 255,.3)'
                  }
                ])
              }
            },
            itemStyle: {
              normal: {
                color: '#6073F6',
                borderColor: '#6073F6',
                borderWidth: 12
              }
            },
            data: sdata[1].data
          },

          {
            type: 'line',
            name: '预警项目比例%',
            itemStyle: {
              color: '#918AFF'
            },
            data: sdata[5].data
          }
        ]
      };
      this.myChart5.setOption(option);
    }
  },
  created() {
    this.getInitdata();
    this.GetAlarmColorTotal();
  }, //生命周期 - 创建完成（可以访问当前this实例）
  mounted() {
    var chartDom = document.getElementById('main11');
    var chartDom2 = document.getElementById('main22');
    var chartDom3 = document.getElementById('main33');
    var chartDom4 = document.getElementById('main44');
    var chartDom5 = document.getElementById('main55');
    this.myChart = this.$echarts.init(chartDom);
    this.myChart2 = this.$echarts.init(chartDom2);
    this.myChart3 = this.$echarts.init(chartDom3);
    this.myChart4 = this.$echarts.init(chartDom4);
    this.myChart5 = this.$echarts.init(chartDom5);
    let sizeFun = function () {
      this.myChart.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
      this.myChart5.resize();
    };
    window.addEventListener('resize', () => {
      this.myChart.resize();
      this.myChart2.resize();
      this.myChart3.resize();
      this.myChart4.resize();
      this.myChart5.resize();
    });
  } //生命周期 - 挂载完成（可以访问DOM元素）
};
var columns = [
  { prop: 'itemName', label: '项目名称', align: 'left' },
  {
    prop: 'planInvestment',
    label: '年度计划投资'
  },
  {
    prop: 'investmentAll',
    label: '年度完成投资'
  },
  {
    prop: 'investment',
    label: '开工累计完成投资'
  },
  {
    prop: 'enterStatStoreFlag',
    label: '统计入库状态'
  },
  { prop: 'alarm', label: '预警类型' }
];
</script>

<style scoped lang="less">
@import url('@/assets/icons/iconfont.css');
@import url('@/assets/fonts/font.css');
.warning {
  margin-top: 20px;
  overflow: hidden;
  margin-right: 10px;
  margin-left: 10px;
  background-color: #fff;
  box-shadow: 0px 9px 17px -13px #e4e4e4;
  .top {
    background-color: #fff;
    display: flex;
    border-bottom: 1px solid #a9a8ad;
    .top_left {
      width: 50%;
      position: relative;
      .title {
        font-size: 14px;
        font-weight: bold;
        margin: 10px 0 10px 20px;
      }
      .title::before {
        content: '';
        position: absolute;
        width: 4px;
        height: 15px;
        background-color: #008aff;
        top: 12px;
        left: 8px;
      }
      .yibiaopan {
        display: flex;
      }
      #main11,
      #main22,
      #main33,
      #main44 {
        width: 35%;
        height: 200px;
      }
    }
    .top_right {
      display: flex;
      margin-left: 10px;
      width: 50%;
      justify-content: space-around;
      align-items: center;
      .ccc:hover {
        transform: translateY(-18px);
      }
      .ccc {
        width: 20%;
        height: 200px;
        box-shadow: 0px 3px 6px 3px #e4e4e4;
        text-align: center;
        transition: all 1.5s;
        img {
          width: 80px;
          height: 80px;
          margin: 20px 10px 0;
        }
        p {
          margin-top: 10px;
        }
        .text {
          font-weight: bold;
          font-size: 14px;
        }
        .number {
          font-size: 16px;
          color: #0795fb;
          font-weight: bold;
          font-family: yousheBlack;
        }
      }
    }
  }
  .bottom {
    margin-top: 10px;
    background-color: #fff;
    position: relative;
    .title {
      font-size: 14px;
      font-weight: bold;
      margin: 10px 0 10px 20px;
      color: #000;
    }
    .title::before {
      content: '';
      position: absolute;
      width: 4px;
      height: 15px;
      background-color: #008aff;
      top: 2px;
      left: 8px;
    }
    #main55 {
      width: 100%;
      height: 350px;
    }
    p {
      margin-top: 30px;
      margin: 20px;
      font-size: 14px;
      font-weight: bold;
      line-height: 25px;
    }
  }
}
</style>
